<template>
	<view class="content">

		<!-- 列表 -->
		<view class="coming_soon" v-if="list.length < 1">敬请期待</view>
		<view class="list" v-else>
			<view class="list_index">
				<view class="list_forr" v-for="(item, idx) in list" @click="taptap(item)">
					<image :src="item.imgs" mode=""></image>
					<view class="list_text">
						<view class="gui-ellipsis">作品: {{item.title}}</view>
						<view class="gui-ellipsis">作者: {{item.author}}</view>
						<view class="gui-ellipsis">单位: {{item.lessee_name}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view style="height: 200rpx;"></view> -->

		<!-- 底部导航 -->
		<view class="base">
			<view v-for="(item, idx) in init" @click="switchover(item.id)">
				<view class="base_text" :class="item.id == init_id? 'base_text_yes' : ''">{{item.name}}</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: null,
				init: [{
						id: 242,
						name: '书法'
					},
					{
						id: 243,
						name: '美术'
					},
					{
						id: 244,
						name: '摄影'
					},
				],
				init_id: null,
				list: [],
			}
		},
		onLoad(opt) {
			this.show_loading()
			this.id = opt.id
			this.init_id = opt.init_id
			this.get_list();
		},
		methods: {
			get_list() {
				let self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 27,
					}
				}, function(res) {
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].type == 2 && data[i].id == self.id) {
							let children = data[i].children
							for (var j = 0; j < children.length; j++) {
								let init_index = children[j].init_index
								for (var z = 0; z < init_index.length; z++) {
									if (init_index) {
										let img = init_index[z].imgs.substring(2, init_index[z].imgs.length - 2);
										init_index[z].imgs = img
									}
								}
								if (self.init_id == children[j].id) {
									self.list = init_index
								}
							}
							self.init = children
						}
					}
					console.log('init: ', self.init);
					console.log('list: ', self.list);
					self.hide_loading();
				}, false)
			},
			switchover(id) {
				this.show_loading();
				this.init_id = id
				this.get_list();
			},
			taptap(item) {
				console.log("content", item.content);
				uni.navigateTo({
					url: 'particulars?content=' + item.content + '&id=' + 238
				})
			},
			show_loading() {
				uni.showLoading({
					title: '请稍候...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		min-height: 130vh;
		background: url('../../../static/activity/centuryLaborUnion/zpzBj.jpg') 100% 100% / 100% 100%;
	}
	
	.coming_soon {
		color: white;
		font-size: 35rpx;
		text-align: center;
		margin-top: 650rpx;
	}

	.list {
		width: 88%;
		height: 1320rpx;
		max-height: 1320rpx;
		overflow: auto;
		margin: 0 auto;
		margin-top: 620rpx;
		margin-bottom: 200rpx;
	}

	.list_index {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.list_forr {
		width: 320rpx;
		margin-bottom: 25rpx;
		border-radius: 15rpx;
		background-color: white;
	}

	.list_forr>image {
		width: 320rpx;
		height: 385rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.list_text>view {
		font-size: 26rpx;
		margin: 8rpx 10rpx;
	}

	.base {
		width: 83%;
		display: flex;
		justify-content: space-between;
		background-color: white;
		padding: 16rpx 25rpx;
		border-radius: 15rpx;
		position: fixed;
		bottom: 38rpx;
		left: 5%;
	}

	.base_text {
		font-size: 32rpx;
		font-weight: bold;
		margin: 0 20rpx;
		padding: 10rpx 22rpx;
	}

	.base_text_yes {
		color: white;
		background-color: #D2000A;
		border-radius: 15rpx;
	}
</style>